<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <!--<link rel="stylesheet" href="css/iview.min.css">-->
    <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
    <title>壹脉智能CRM</title>
    <!-- Bootstrap Core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="../assets/node_modules/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet"> -->
    <!-- This page CSS -->
    <!-- chartist CSS -->
    <!-- <link href="../assets/node_modules/morrisjs/morris.css" rel="stylesheet"> -->
    <!--c3 CSS -->
    <!-- <link href="../assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> -->
    <!--Toaster Popup message CSS -->
    <!-- <link href="../assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> -->
    <!-- Custom CSS -->
    <link href="css/style.min.css" rel="stylesheet">
    <!-- Dashboard 1 Page CSS -->
    <!--<link href="css/pages/dashboard1.css" rel="stylesheet">-->
    <!-- You can change the theme colors from here -->
    <link href="css/colors/default.css" id="theme" rel="stylesheet">
    <!-- <link href="../assets/node_modules/gridstack/gridstack.css" rel="stylesheet"> --><!-- 待考证-->
    <link href="css/pages/other-pages.css" rel="stylesheet">
    <link rel="stylesheet" href="css/diy.min.css">
    <!--<link href="../assets/node_modules/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/node_modules/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" type="text/css"/>-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body class="fix-header fix-sidebar card-no-border">
<div class="preloader">
    <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
    </div>
</div>
<div id="main-wrapper">
    <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <div class="navbar-header">
                <a class="navbar-brand" href="../index.html">
                    <b>
                        <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
                        <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
                    </b>
                    <span>
                        <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
                    </span>
                </a>
            </div>
            <div class="navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"
                                            href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
                    <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark"
                                            href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
                </ul>
                <user-head></user-head>
            </div>
        </nav>
    </header>
    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <company-position></company-position>
            <nav class="sidebar-nav p-0">
                <c-slider current="5"></c-slider>
            </nav>
        </div>
    </aside>
    <div class="page-wrapper">

        <div class="container-fluid">

            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3 class="text-themecolor">商品管理</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                        <li class="breadcrumb-item active">企业管理</li>
                        <li class="breadcrumb-item active">商品管理</li>
                    </ol>
                </div>
            </div>

            <!--列表-->
            <div class="row bgfff">
                <ul class="nav w100p nav-tabs customtab position-relative" role="tablist">
                    <li class="nav-item" v-for="(v,k) in navs" :key="k">
                        <a class="nav-link curpointer" data-toggle="tab" role="tab"
                           :class="v.id == navs_id ? 'active' : '' "
                           @click="changeNav(v.id)">
                            <span class="hidden-sm-up">
                                <i class="ti-home"></i>
                            </span>
                            <span class="hidden-xs-down">{{v.title}}</span>
                        </a>
                    </li>
                </ul>

                <div class="clearfix p-t-20 w100p p-r-31 p-b-17">
                    <div class="float-left d-flex p-l-30 fs14 cfff lh30 align-cen">
                        <a href="addProd.html" class="btn-success cfff hoverfff p-l-20 p-r-19 bradius4 m-r-10"
                           v-if="navs_id == 0">发布商品</a>
                        <span class="bgblue p-l-20 p-r-19 bradius4 m-r-10" v-if="navs_id == 1 " @click="addGoodsType">新建分类</span>
                        <!--<span class="bgblue_2 p-l-20 p-r-19 bradius4 m-r-10">删除</span>-->
                    </div>

                    <div class="float-right d-flex align-cen">
                        <select class="custom-select w105 m-r-19 bced"
                                v-if="navs_id == 0"
                                v-model="seleceValue" @change="selectChange">
                            <option value="" class="cbcc">全部</option>
                            <option v-for="(v,k) in goodsTypeNames" :key="k" :value="v.goodstypeId" >
                                {{v.name}}
                            </option>
                        </select>

                        <div class="form-group m-b-0 w241 m-r-21">
                            <input type="text" id="company" class="form-control p-l-23 phgray"
                                   :placeholder="navs_id == 0 ? '请输入商品名称' : '请输入分类名称' " v-model="clientkey">
                        </div>
                        <span class="btn-success w68 textc bradius4 m-r-10 cfff fs14 lh30" @click="search">查询</span>

                    </div>
                </div>

                <div class="row w100p p-l-30">
                    <div class="col-12">
                        <div class="card m-b-0">
                            <!--商品列表-->
                            <table v-if="navs_id == 0"
                                   class="align-cen-table textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
                                <thead>
                                <tr>
<!--                                    <th>-->
<!--                                        &lt;!&ndash;<input type="checkbox">&ndash;&gt;-->
<!--                                        <span class="w16 h16 bradius4 bced d-inline-block mdi position-relative top3"-->
<!--                                              :class="allChecks? 'mdi-check checks' : '' "-->
<!--                                              @click="checkAll"-->
<!--                                        ></span>-->
<!--                                    </th>-->
                                    <th>商品ID</th>
                                    <th class="w20p">商品</th>
                                    <th>分类</th>
                                    <th>价格</th>
                                    <th>总库存</th>
                                    <th>总销量</th>
                                    <th>发布时间</th>
                                    <th class="w20p">操作</th>
                                    <th>是否分销</th>
                                    <th>排序</th>
                                </tr>
                                </thead>
                                <tbody class="bgfff">
                                <tr v-for="(v,k) in goodsList" :key="k" class="curpointer" >
<!--                                    <td>-->
<!--                                        <span class="w16 h16 bradius4 bced d-inline-block mdi position-relative top3"-->
<!--                                              :class="v.checked ? 'mdi-check checks':''"-->
<!--                                              @click.stop="checkTap(k)"></span>-->
<!--                                    </td>-->
                                    <td v-html="v.goodsId"></td>
                                    <td v-html="v.goodsName" class="w20p"></td>
                                    <td v-html="v.goodsTypeName"></td>
                                    <td>{{(v.price/100).toFixed(2)}}</td>
                                    <td v-html="v.goodsNum"></td>
                                    <td v-html="v.dealNum"></td>
                                    <td>{{v.createTime | formatDate('yyyy/MM/dd hh:mm')}}</td>
                                    <td class="w20p">
                                        <span class="d-inline-block m-r-40 curpointer" @click="addProd(v.goodsId)">编辑</span>
                                        <span class="d-inline-block m-r-40 curpointer" @click="delGoodsInfo(v.goodsId)">删除</span>
                                        <span class="d-inline-block cblue curpointer" @click="toDetail(v.goodsId)">查看</span>
                                    </td>
                                    <td>
                                        {{v.isDistribution | state2str}}
                                    </td>
                                    <td>
                                        <span class="d-inline-block lh16 diy-circle-arrow m-r-40 mdi mdi-arrow-up w16 h16 bced braduis50p" @click="moveGoods(v.goodsId ,1)"></span>
                                        <span class="d-inline-block lh16 diy-circle-arrow m-r-40 mdi mdi-arrow-down w16 h16 bced braduis50p" @click="moveGoods(v.goodsId ,2)"></span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="textc" v-if="navs_id == 0 && !goodsList.length ">暂无数据</div>
                            <!--分类列表-->
                            <table v-if="navs_id == 1"
                                   class="align-cen-table textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
                                <thead>
                                <tr>
<!--                                    <th>-->
<!--                                        &lt;!&ndash;<input type="checkbox">&ndash;&gt;-->
<!--                                        <span class="w16 h16 bradius4 bced d-inline-block mdi position-relative top3"-->
<!--                                              :class="allChecks? 'mdi-check checks' : '' "-->
<!--                                              @click="checkAll"-->
<!--                                        ></span>-->
<!--                                    </th>-->
                                    <th>编号</th>
                                    <th class="w20p">分类名称</th>
                                    <th class="w20p">商品数量</th>
                                    <th class="w20p">总销量</th>
                                    <th>操作</th>
                                    <th>排序</th>
                                </tr>
                                </thead>
                                <tbody class="bgfff">
                                <tr v-for="(v,k) in goodsTypeList" :key="k">
<!--                                    <td>-->
<!--                                            <span class="w16 h16 bradius4 bced d-inline-block mdi position-relative top3"-->
<!--                                                  :class="v.checked ? 'mdi-check checks':''"-->
<!--                                                  @click.stop="checkTap(k)"></span>-->
<!--                                    </td>-->
                                    <td v-html="v.goodstypeId"></td>
                                    <td class="w20p" v-html="v.name"></td>
                                    <td class="w20p" v-html="v.goodsNum"></td>
                                    <td class="w20p" v-html="v.dealNum"></td>
                                    <td>
                                        <span class="d-inline-block m-r-40 curpointer" @click="addGoodsType(v.goodstypeId,v.name)">编辑</span>
                                        <span class="d-inline-block m-r-40 curpointer" @click="delGoodsType(v.goodstypeId)">删除</span>
                                        <!--<span class="d-inline-block cblue curpointer" @click="transferGoods(v.goodstypeId)">转移商品</span>-->
                                    </td>
                                    <td>
                                        <span class="d-inline-block lh16 diy-circle-arrow m-r-40 mdi mdi-arrow-up w16 h16 bced braduis50p" @click="moveGoodsType(v.goodstypeId,1)"></span>
                                        <span class="d-inline-block lh16 diy-circle-arrow m-r-40 mdi mdi-arrow-down w16 h16 bced braduis50p" @click="moveGoodsType(v.goodstypeId,2)"></span>
                                        <!--<span class="d-inline-block lh16 mdi mdi-format-horizontal-align-left fs18 fa-rotate-90 position-relative top1"></span>-->
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="textc" v-if=" navs_id == 1 && !goodsTypeList.length">暂无数据</div>
                        </div>

                        <!--分页-->
                        <div class="d-flex p-b-50 jsend">
                            <page-helper :page-number="page" :total-count="total" @change="jumpPage"></page-helper>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>
</div>


<!-- All Jquery -->
<!-- ============================================================== -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap popper Core JavaScript -->
<!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
<script src="js/bootstrap.min.js"></script>
<!--<script src="js/iview.min.js"></script>-->
<!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
<!--<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>-->
<!-- slimscrollbar scrollbar JavaScript -->
<script src="js/perfect-scrollbar.jquery.min.js"></script>
<!--Wave Effects -->
<!-- <script src="js/waves.js"></script> -->
<!--Menu sidebar -->
<script src="js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--morris JavaScript -->
<!-- <script src="../assets/node_modules/raphael/raphael-min.js"></script>
<script src="../assets/node_modules/morrisjs/morris.min.js"></script> -->
<!--c3 JavaScript -->
<!-- <script src="../assets/node_modules/d3/d3.min.js"></script>
<script src="../assets/node_modules/c3-master/c3.min.js"></script> -->
<!-- Popup message jquery -->
<!-- <script src="../assets/node_modules/toast-master/js/jquery.toast.js"></script> -->
<!-- Chart JS -->
<!--<script src="js/dashboard1.js"></script>-->
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<!-- <script src="../assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> -->

<script src="js/vue.js"></script>
<!--<script src="js/layer/layer.min.js"></script>-->

<!-- Draggable-portlet -->
<!-- <script src="../assets/node_modules/jqueryui/jquery-ui.min.js"></script> -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>-->
<script src="js/lodash.js"></script>
<script src="js/gridstack.js"></script>
<!-- <script src="../assets/node_modules/gridstack/gridstack.jQueryUI.js"></script> -->
<script src="js/layer/layer.js"></script>
<script src="js/config.js"></script><script src="js/extend.js"></script>

<script>
    $(function () {
        var vw = new Vue({
            el: '#main-wrapper',
            // components:{header},
            data: {
                username: '用户昵称',
                search_key: '',//搜索关键字
                navs: [
                    {title: '商品列表', id: 0},
                    {title: '商品分类', id: 1},
                ],
                navs_id: 0,
                clientkey: '',//搜索商品或商品类型名称
                goodsList: [],//商品信息列表
                goodsTypeList: [],//商品类型列表
                goodsTypeNames:[],//商品下拉分类
                class_ranking: [],//商品分类排名
                mainHeight: '',
                allChecks: false,
                seleceValue: '',//筛选分类的值
                currentPage: '1',//页数
                inputPage: '1',//跳转到第几页
                totalPage: '10',//总页数
                pageLists: [1, 2, 3, 4],//显示的页数
                goodsId: 0,// 商品ID
                goodsTypeName: '',// 商品名称
                page: 1,
                total: 0,
            },
            watch: {
                inputPage: function (newVal, oldVal) {
                    if (newVal - 0 > this.totalPage - 0) {
                        this.inputPage = this.totalPage
                    }
                }
            },
            mounted() {
                $('.grid-stack').gridstack({
                    width: 12,
                    alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
                    resizable: {
                        handles: 'e, se, s, sw, w'
                    }
                });
                //加载商品分类-下拉
                this.goodsTypeNameListInfo();
                this.changeNav(0);
                //初始化商品分类排名
                /*let v = this;
                this.goodsTypeList.forEach(function (i, k) {
                    v.class_ranking.push({id: i.id, y: k});
                })*/
            },
            methods: {
                search() {//搜索
                    this.page = 1;
                    this.changeNav(this.navs_id);
                },
                changeNav(id) {//切换导航
                    this.navs_id = id;
                    // this.clientkey = '';
                    this.page = 1;
                    this.goodsTypeList = [];
                    this.goodsList = [];
                    if (this.navs_id == 0) {
                        this.loadGoodsList();
                    } else {
                        this.loadGoodsTypeList();
                    }
                },
                loadGoodsTypeList() {//加载商品类型数据
                    var _this = this;
                    $.cAjax('/crmPc/companyGoods/selectGoodsTypeInfoPC', {
                        data: {
                            pageNum: this.page,
                            name: this.clientkey
                        }
                    }).then(function (data) {
                        if (data) {
                            _this.goodsTypeList = data.pageInfo.list || [];
                            _this.total = data.pageInfo.total;
                        }
                    }).catch(function (err) {

                    });
                },
                loadGoodsList() {//加载商品数据
                    var _this = this;
                    $.cAjax('/crmPc/companyGoods/getGoodsInfoPC', {
                        data: {
                            goodsId: this.goodsId,
                            goodsName: this.clientkey,
                            goodstypeId: this.seleceValue,
                            pageNum: this.page,
                        }
                    }).then(function (data) {
                        if (data) {
                            var pageInfo = JSON.parse(data.pageInfo);
                            _this.goodsList = pageInfo.list || [];
                            _this.total = pageInfo.total;
                        }
                    }).catch(function (err) {

                    });
                },
                goodsTypeNameListInfo() {//加载商品分类-下拉
                    var _this = this;
                    $.cAjax('/crmPc/companyGoods/getGoodsTypeInfo', {
                        data: {}
                    }).then(function (data) {
                        if (data) {
                            _this.goodsTypeNames = data || [];
                        }
                    }).catch(function (err) {

                    });
                },
                addGoodsType(id,name) {//添加/修改商品分类
                    var param = {};
                    if(id > 0){
                        param.goodstypeId = id;
                    }
                    layer.prompt({title:'请输入商品类型名称', formType:0, value:name},(val, index) => {
                        param.name = val;
                        $.cAjax('/crmPc/companyGoods/addGoodsType', {
                            data: param
                        }).then( (data) =>{
                            layer.msg("操作成功");
                            // 加载数据
                            this.loadGoodsTypeList();
                        }).catch(function (err) {
                        });
                        layer.close(index);
                    });
                },
                delGoodsType(id) {//删除商品分类
                    layer.confirm('确定删除该商品类型？', {
                        btn: ['确定','取消']
                    }, () =>{
                        $.cAjax('/crmPc/companyGoods/delGoodsType', {
                            data: {
                                goodstypeId: id,
                            }
                        }).then( (data) =>{
                            layer.msg("操作成功");
                            // 加载数据
                            this.loadGoodsTypeList();
                        }).catch(function (err) {
                        });
                    });
                },
                transferGoods(id) {//转移商品
                    // 先根据商品类型id查询商品信息
                    // 选择要转移的商品，然后在选择转移后的商品类型
                    // 转移商品接口
                    $.cAjax('/crmPc/companyGoods/transferGoods', {
                        data: {
                            goodsId:1,
                            goodstypeId: id,
                        }
                    }).then( (data) =>{
                        layer.msg("操作成功");
                        // 加载数据
                        this.loadGoodsTypeList();
                    }).catch(function (err) {
                    });
                },
                moveGoods(id, type){
                    $.cAjax('/crmPc/companyGoods/moveGoodsInfo', {
                        data: {
                            goodsId: id,
                            type: type,
                        }
                    }).then( (data) =>{
                        layer.msg("操作成功");
                        // 加载数据
                        this.loadGoodsList();
                    }).catch(function (err) {
                    });
                },
                moveGoodsType(id,type) {//上移/下移商品分类
                        $.cAjax('/crmPc/companyGoods/moveGoodsType', {
                            data: {
                                goodstypeId: id,
                                type: type,
                            }
                        }).then( (data) =>{
                            layer.msg("操作成功");
                            // 加载数据
                            this.loadGoodsTypeList();
                        }).catch(function (err) {
                        });
                },
                delGoodsInfo(id) {//删除商品信息
                    layer.confirm('确定删除该商品？', {
                        btn: ['确定','取消']
                    }, ()=>{
                        $.cAjax('/crmPc/companyGoods/delGoodsInfo', {
                            data: {
                                goodsId: id,
                            }
                        }).then( (data) =>{
                            layer.msg("操作成功");
                            // 加载数据
                            this.loadGoodsList();
                        }).catch(function (err) {
                        });
                    });
                },
                    jumpPage({currentPage}){
                        this.page = currentPage;
                        if (this.navs_id == 0) {
                            this.loadGoodsList();
                        } else {
                            this.loadGoodsTypeList();
                        }
                    },
                    checkAll() {
                        this.allChecks = !this.allChecks;
                        let v = this;
                        v.lists.forEach(function (i, k) {
                            v.$set(i, 'checked', v.allChecks);
                        })
                    },
                    checkTap(index) {
                        let v = this,
                            check_length = 0;
                        console.log(index)
                        v.$set(v.lists[index], 'checked', !v.lists[index].checked);
                        v.lists.forEach(function (i, k) {
                            if (i.checked) {
                                check_length++;
                            }
                        });
                        if (check_length == v.lists.length) {
                            v.allChecks = true;
                        } else {
                            v.allChecks = false;
                        }
                    } ,
                    toDetail(id) {//商品详情
                        location.href = 'prodDetail.html?id=' + id;
                    },
                    addProd(id) {//修改商品详情
                        location.href = 'addProd.html?id=' + id;
                    },
                    selectChange() {
                        // console.log(this.seleceValue)
                    },
                    gridCallback(dom) {
                        let dataset = dom.element[0].dataset,
                            v = this;
                        if (dataset.id == "grid-stack-item") {//拖拽元素

                            v.$nextTick(function () {
                                let selectors = document.querySelectorAll('.grid-stack-item');
                                v.class_ranking.forEach(function (item, index) {

                                    let _y = selectors[index].dataset.gsY, //当前的排名
                                        _classid = selectors[index].dataset.classid;

                                    //排名变化比较
                                    if (_classid == item.id && _y != item.y) {
                                        v.class_ranking[index].y = _y;
                                        v.$set(v.class_ranking[index], 'y', _y);
                                    }

                                });
                                //获取所有的
                            })

                        }
                    } ,
                    changePage(status) {//改变当前页
                        let v = this;
                        if (status == -1) {
                            if (v.currentPage == 1) return;

                            v.currentPage--;
                            if (v.currentPage < v.pageLists[0] && v.pageLists[0] != 1) {//翻到第一页
                                v.pageLists.forEach(function (i, k) {
                                    v.$set(v.pageLists, k, --i);
                                })
                            }

                        } else if (status == 1) {
                            if (v.currentPage == v.totalPage) return;

                            v.currentPage++;

                            if (v.pageLists[3] <= v.currentPage && v.currentPage < v.totalPage) {//加到了最后一个
                                v.pageLists.forEach(function (i, k) {
                                    v.$set(v.pageLists, k, ++i);
                                })
                            }
                        }
                    } ,
                    toPage(_page){//页面跳转
                        this.currentPage = _page;
                        let v = this;
                        if (v.pageLists.indexOf(_page) < 0) {//没在页面范围内

                            if (_page <= 4) {
                                v.pageLists = [1, 2, 3, 4];
                            } else {
                                v.pageLists = [_page - 3, _page - 2, _page - 1, _page];
                            }

                        }
                    }


                },
            filters:{
                state2str(state){
                    let obj = {
                        0: '否',
                        1: '是',
                    }

                    return obj[state];
                },
            }

        })
    })
</script>


</body>

</html>












